<template>
  <drawer :show="edit" :styles="{width:'600px'}" pos="right" tran="push" @change-show="changeDrawerShow">
    <div slot="drawer" style="height:100%">
      <edit v-if="edit" :data="selectTable" @setData="setData" @close="edit=false"></edit>
    </div>
    <div class="app-container">
      <div class="filter-container">
        <el-button class="filter-item" @click="handleAdd(-1)" type="primary" icon="el-icon-plus">添加</el-button>
        <el-input class="filter-item" @keyup.enter.native="handleFilter" style="width: 200px;" placeholder="请输入关键词" v-model="search.keyword"></el-input>
        <el-button class="filter-item" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
        <el-button class="filter-item" v-waves @click="handleCreateAllHtml">生成全部分类静态</el-button>
        <el-button class="filter-item" v-waves @click="handleCreateAllHtmlArt">生成全部文章静态</el-button>
      </div>
      <tree-table :data="tableData" :columns="columns" border :expandAll="false" ref="tree">
        <el-table-column property="columnId" label="分类Id" show-overflow-tooltip align="center" width="100"></el-table-column>
        <el-table-column property="comment" label="备注" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag v-if="!scope.row.columnStatus" type="success" size="mini">启用</el-tag>
            <el-tag v-else type="danger" size="mini">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleUp(scope.row)">上移</el-button>
            <el-button size="mini" @click="handleDown(scope.row)">下移</el-button>
          </template>
        </el-table-column>
        <el-table-column label="生成静态" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleCreateHtml(scope.$index, scope.row)">分类</el-button>
            <el-button size="mini" @click="handleCreateHtmlArt(scope.$index, scope.row)">文章</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleAdd(scope.row.columnId)">添加下级</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" :disabled="!!scope.row.children.length">删除</el-button>
          </template>
        </el-table-column>
      </tree-table>
    </div>
  </drawer>
</template>

<script>
import * as api from '@/utils/api'
import waves from '@/directive/waves' // 水波纹指令
import treeTable from '@/components/TreeTable'
import edit from './edit'
export default {
  directives: {
    waves
  },
  data() {
    return {
      columns: [
        {
          text: '名称',
          value: 'columnName'
        }
      ],
      tableData: [],
      search: {
        keyword: ''
      },
      selection: [],
      selectTable: {},
      pload: false,
      edit: false
    }
  },
  components: {
    edit,
    drawer: () => import('@/components/Drawer'),
    treeTable
  },
  created() {
    this.getData()
  },
  methods: {
    async handleCreateAllHtml(index, row) {
      await this.$confirm('确认要生成所有分类静态吗', { type: 'warning' })
      await api.createHtmlByColumn({})
      this.$notify({ title: '操作成功，请稍后查看', type: 'success', duration: 3000 })
    },
    async handleCreateAllHtmlArt(index, row) {
      await this.$confirm('确认要生成所有分类下属文章静态吗', { type: 'warning' })
      await api.createHtmlByArt({})
      this.$notify({ title: '操作成功，请稍后查看', type: 'success', duration: 3000 })
    },
    async handleCreateHtml(index, row) {
      await this.$confirm('确认要生成分类静态吗', { type: 'warning' })
      await api.createHtmlByColumn({ columnIds: row.columnId })
      this.$notify({ title: '操作成功，请稍后查看', type: 'success', duration: 3000 })
    },
    async handleCreateHtmlArt(index, row) {
      await this.$confirm('确认要生成分类下属文章静态吗', { type: 'warning' })
      await api.createHtmlByArt({ columnId: row.columnId })
      this.$notify({ title: '操作成功，请稍后查看', type: 'success', duration: 3000 })
    },
    async handleDelete(index, row) {
      this.$confirm('确认要删除吗', { type: 'warning' }).then(async() => {
        try {
          this.pload = false
          await api.cateRemove({ columnIds: row.columnId })
          this.$notify({ title: '删除成功', type: 'success', duration: 3000 })
          const fn = m => {
            m.some(item => {
              if (item.columnId === row.parentColumnId) {
                item.children.splice(item.children.indexOf(row), 1)
                return true
              } else {
                if (item.children.length) {
                  fn(item.children)
                }
              }
            })
          }

          if (row.parentColumnId === -1) {
            this.tableData.splice(this.tableData.indexOf(row), 1)
          } else {
            fn(this.tableData)
          }
        } catch (e) {
          this.pload = true
        }
      })
    },
    handleUp(row) {
      const cur = row._level === 1 ? this.tableData : row.parent.children
      const index = cur.indexOf(row)
      cur[index] = cur.splice(index - 1, 1, cur[index])[0]
      this.handleOrder()
    },
    handleDown(row) {
      const cur = row._level === 1 ? this.tableData : row.parent.children
      const index = cur.indexOf(row)
      cur[index] = cur.splice(index + 1 === cur.length ? 0 : index + 1, 1, cur[index])[0]
      this.handleOrder()
    },
    async handleOrder() {
      const list = this.$refs.tree.formatData.map((i, index) => {
        return i.columnId
      }).join(',')

      console.log(list)
      await api.cateOrder({ ids: list })
      this.$notify({ title: '排序成功', type: 'success', duration: 1000 })
    },
    handleAdd(pid) {
      this.selectTable = {}
      this.selectTable.method = 'add'
      this.selectTable.orderId = 0
      this.selectTable.parentColumnId = pid
      this.selectTable.contentMappingList = []
      this.edit = true
    },
    handleEdit(index, row) {
      this.selectTable = row
      this.selectTable.method = 'edit'
      this.edit = true
    },
    setData(data) {
      if (this.selectTable.method === 'add') {
        data.children = []
        if (data.parentColumnId === -1) {
          this.tableData.push(data)
        } else {
          const fn = m => {
            m.some(item => {
              if (item.columnId === data.parentColumnId) {
                item.children.push(data)
                return true
              } else {
                if (item.children.length) {
                  fn(item.children)
                }
              }
            })
          }
          fn(this.tableData)
        }
      } else {
        this.getData()
      }
    },
    async getData() {
      const data = this.JSONo(
        {
        },
        this.search
      )
      this.pload = false
      const Datas = await api.cateList(data)
      this.tableData = Datas
      this.pload = true
    },
    handleFilter() {
      this.getData()
    },
    changeDrawerShow(state) {
      this.edit = state
      console.log(state)
    }
  }
}
</script>
